import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import AudioDance4 from '..';
import styles from './index.module.less';

const Demo = (props) => {
  const { className } = props;

  const audioDanceRef = useRef(null);

  useEffect(() => {
    // setTimeout(() => {
    // setInterval(() => {
    // setTimeout(() => {
    //   if (audioDanceRef.current) {
    //     const arr = [];
    //     for (let i = 0; i < 2; i += 1) {
    //       arr[i * 2] = Math.random() * 100;
    //       arr[i * 2 + 1] = Math.random() * 100;
    //     }
    //     audioDanceRef.current.drawArray(arr);
    //   }
    // }, 100);
    // setInterval(() => {
    //   if (audioDanceRef.current) {
    //     const arr = [];
    //     for (let i = 0; i < 2; i += 1) {
    //       arr[i] = Math.random() * 100;
    //     }
    //     audioDanceRef.current.drawArray(arr);
    //   }
    // }, 100);
    const palette = new Uint8Array(256 * 2 * 4);
    const setPalette = (index, r, g, b, a) => {
      palette[index * 4 + 0] = r;
      palette[index * 4 + 1] = g;
      palette[index * 4 + 2] = b;
      palette[index * 4 + 3] = a;
    };
    for (let i = 0; i < 256 * 2; i += 1) {
      setPalette(
        i,
        parseInt(Math.random() * 255, 10),
        parseInt(Math.random() * 255, 10),
        parseInt(Math.random() * 255, 10),
        parseInt(Math.random() * 255, 10),
      );
    }

    const width = 20;
    const height = 20;

    const sourceArr = new Float32Array(width * height);
    for (let i = 0; i < height; i += 1) {
      for (let j = 0; j < width; j += 1) {
        if (i === j / 4) {
          sourceArr[i * width + j] = 255;
        } else {
          // sourceArr[i * 100 * 4 + j] = 0;
        }
      }
    }

    // function draw() {
    //   if (audioDanceRef.current) {
    //     audioDanceRef.current.drawArray(palette, sourceArr, 1024, 1024);
    //   }
    //   requestAnimationFrame(draw);
    // }
    // draw();
    setInterval(() => {
      if (audioDanceRef.current) {
        audioDanceRef.current.drawArray(palette, sourceArr, width, height);
      }
    }, 20);
  }, []);

  return (
    <div className={classnames(styles.root, className)}>
      <AudioDance4 ref={audioDanceRef} />
    </div>
  );
};

Demo.defaultProps = {
  className: null,
};

Demo.propTypes = {
  className: PropTypes.any,
};

export default Demo;
